<template>
	<view>
		<view class="top">
			<map id="map_container" :latitude="myla" :longitude="mylo" :markers="markers" :polyline="polyline"
				:show-location="true" class="map" :circles="circles">
				<!-- <cover-view slot="callout">
					<block v-for="(item,index) in markers" :key="index">
						<cover-view class="customCallout" :marker-id="item.id">
							<cover-view class="content">
								<cover-view style="display: flex;font-size: 24rpx;"> <cover-view>距车辆</cover-view>
									<cover-view
										style="margin: 0 2rpx;font-size: 24rpx;color: #4281FF;">{{info.Destination.km}}</cover-view>
									<cover-view>km</cover-view> </cover-view>
							</cover-view>
						</cover-view> -->
					</block>
				</cover-view>
			</map>
			<navigator open-type="navigateBack">
				<image class="s_img" src="../../static/image/comeback.png" mode=""></image>
			</navigator>
		</view>
		<view class="bottom" style="margin-top: 900rpx;">
			<view class="back bottom_a" style="padding-bottom: 0;" v-if="lists.rider_status>0">
				<view class="dis_f_l_c bor_bot">
					<image class="a_img" :src="url+'/logo.png'" mode=""></image>
					<view class="black_s_28 mar_r_8">
						<text>顺丰快递</text>
						<text>7731725564853321</text>
					</view>
					<view class="blue_f_28" @click="copy('777777')">复制</view>
				</view>
				<view class="dis_f_sb">
					<view class="b_left">
						<view class="b_list">
							<view class="b_dian back_l_bule"></view>
							<view class="b_xian back_l_bule"></view>
						</view>
						<view class="b_list">
							<view class="b_dian back_l_hui"></view>
							<view style="height: 110rpx;" class="b_xian back_r_hui"></view>
						</view>
					</view>
					<view class="b_right">
						<view class="bor_b_bot">
							<view class="dis_f_sb_b bor_b_16">
								<view>
									<text class="black_f_32 font_w_bold mar_r_8">运输中</text>
									<text class="grey_f_24"> 2022-02-10 20:30</text>
								</view>
								<view class="dis_f_r_c" @click="go_view('/pages-1/sc_dd/wl_xq')">
									<text class="grey_f_28 mar_r_8">物流详情</text>
									<image class="r_img" :src="url+'/image/right.png'" mode=""></image>
								</view>
							</view>
							<view class="black_f_28">
								快件到达[重庆分拣中心]，下一站[贵阳转运中心]
							</view>
						</view>
						<view>
							<view class="bor_b_16">
								<view>
									<text class="grey_h_32 font_w_bold mar_r_8">运输中</text>
									<text class="grey_c_24"> 2022-02-10 20:30</text>
								</view>
							</view>
							<view class="grey_f_28">
								商家已发货
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bott_b">
				<view class="back bottom_b dis_f_sb bor_bot">
					<image class="b_img" :src="lists.specifications[0].product_image" mode=""></image>
					<view class="bo_b_r">
						<view>
							<view class="black_f_32 font_w_bold slh_one bor_b_16">{{lists.specifications[0].product_name}}</view>
							<view class="dis_f_sb_c">
								<view class="grey_f_28">{{lists.specifications[0].guige}}</view>
								<view class="black_f_28">x{{lists.specifications[0].num}}</view>
							</view>
						</view>
						<view class="black_f_28 dis_f_r_c">￥{{lists.specifications[0].money}}</view>
					</view>
				</view>
				<view class="back bottom_c bor_bot dis_f_sb_c">
					<view class="black_s_28">留言</view>
					<view class="black_f_28">{{lists.message}}</view>
				</view>
				<view class="back bottom_c bor_bot">
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">商品金额</view>
						<view class="black_f_28">￥{{lists.money.order_price}}</view>
					</view>
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">运费</view>
						<view class="black_f_28">包邮</view>
					</view>
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">优惠</view>
						<view class="black_f_28">￥{{lists.money.coupon_price}}</view>
					</view>
					<view class="dis_f_sb_c">
						<view class="black_s_28">合计</view>
						<view class="orange_f_28">￥{{lists.money.actual_price}}</view>
					</view>
				</view>
				<view class="back bottom_c bor_bot">
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">订单编号</view>
						<view class="black_f_28"><text class="mar_r_16">{{lists.order_sn}}</text> <text
								class="blue_f_28" @click="copy(lists.order_sn)">复制</text></view>
					</view>
					<view class="dis_f_sb_c bor_bot">
						<view class="black_s_28">创建时间</view>
						<view class="black_f_28">{{lists.time.createtime}}</view>
					</view>
					<view class="dis_f_sb_c bor_bot" v-if="lists.order_status==1">
						<view class="black_s_28">付款时间</view>
						<view class="black_f_28">{{lists.time.pay_time}}</view>
					</view>
					<view class="dis_f_sb_c" v-if="lists.rider_status==1">
						<view class="black_s_28">发货时间</view>
						<view class="black_f_28">{{lists.time.ship_time}}</view>
					</view>
				</view>
				<!-- <image class="bo_js_er_img" src="../../static/image/zcxian.png" mode=""></image> -->
			</view>
		</view>
	</view>
</template>

<script>
	import amap from "@/amap-wx.130.js";
	export default {
		data() {
			return {
				key: "1736dd18a297e467c119fb19bd9bb0c7",
				title: "物流详情",
				latitude: 35.408925,
				longitude: 116.596165,
				mapInfo: [],
				markers: [],
				circles: [
				
				],
				polyline: [],
				mylo: '',
				myla: '',
				mapContext: '',
				order_id:0,
				lists:'',
				url:'',
			}
		},
		onLoad(e) {
			this.url=this.$.ajax_url3
			this.amapPlugin = new amap.AMapWX({
				key: this.key //该key 是在高德中申请的微信小程序key
			});
			this.cshLo()
			this.mapContext = uni.createMapContext("map_container", this) // 这个'map'名字要跟map组件的id要同名，才能拿到map组件，调用它的一些API
		  
			if(e.id){
				this.order_id=e.id
			}
			this.get_lists()
		},
		methods: {
			
			get_lists() {
				this.$.ajax(1, 'post', 'store/order/mall_orders', {
					id: this.order_id,
					// status: this.bactive,
					// page: this.page,
					// pagesize: 10,
				}, (res) => {
			
					// if (this.page == 1) {
						this.lists = res.data
						// console.log(this.lists)
					// } else {
					// 	this.lists = this.lists.concat(res.data)
					// }
			
				})
			},
			copy(data){
				uni.setClipboardData({
					data,
					success: function () {
						console.log('success');
					},fail(ews) {
						console.log(ews);
					}
				});

			},
			cshLo() {
				let app = this
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						app.myla = res.latitude
						app.mylo = res.longitude
						console.log('当前位置的纬度：' + res.latitude);
						app.loac()
					},
					fail(err) {
						console.log(err, 'err');
					}
				});
			
			
			},
			loac() {
				let self = this;
				console.log(this.info, 'this.info.vehicle');
				let a = this.mylo + ',' + this.myla
				let b = 116.397128 + ',' + 39.916527
				console.log(a, b);
				this.amapPlugin.getDrivingRoute({
					origin: a,
					destination: b,
					success: (data) => {
						console.log(data.paths[0].steps, 'aaa');
						const points = data.paths[0].steps.map(step => {
							return step.polyline.split(';').map(coord => {
								const [longitude, latitude] = coord.split(',');
								return {
									longitude: parseFloat(longitude),
									latitude: parseFloat(latitude)
								};
							});
						}).flat();
						// 获取第一个和最后一个经纬度点
						const firstPoint = points[0];
						const lastPoint = points[points.length - 1];
						// 更新circles数组
						this.circles = [
							// 起点圆
							{
								latitude: firstPoint.latitude,
								longitude: firstPoint.longitude,
								color: '#3377FF',
								fillColor: '#ffffff',
								radius: 1,
								strokeWidth: 2
							},
							// 终点圆
							{
								latitude: lastPoint.latitude,
								longitude: lastPoint.longitude,
								color: '#3377FF',
								fillColor: '#ffffff',
								radius: 1,
								strokeWidth: 2
							}
						];
						let app = this
			
						// 更新markers数组
						this.markers = [
							// 终点标记
							{
								id: 1,
								width: 37,
								height: 37,
								latitude: lastPoint.latitude,
								longitude: lastPoint.longitude,
								iconPath: '/static/image/shd.png', // 自定义终点图标路径
								title: '终点',
								joinCluster: true
							},
							{
								id: 2,
								width: 37,
								height: 37,
								latitude: this.latitude,
								longitude: this.longitude,
								iconPath: '/static/image/fhd.png', // 自定义终点图标路径
								title: '11',
								joinCluster: true,
								customCallout: {
									anchorY: 0,
									anchorX: 0,
									display: "ALWAYS"
								}
							}
						];
						let points2 = [{
								latitude: this.markers[0].latitude,
								longitude: this.markers[0].longitude,
							},
							{
								latitude: this.markers[1].latitude,
								longitude: this.markers[1].longitude,
							}
						]
						setTimeout(() => {
							this.includePointsFn(points2)
						}, 1000)
			
			
						// 更新polyline数组
						this.polyline = [{
							points: points,
							color: "#3377FF",
							width: 7,
							dottedLine: false
						}];
						console.log('this.circles', this.circles);
					},
					fail: (info) => {
						console.log(info, 'bbb');
					}
				});
				},
				includePointsFn(points) {
							this.mapContext.includePoints({
								padding: [80, 50, 80, 50],
								points: points
							})
						},
			go_view(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss" >
	.top {
		position: relative;
		margin-left: 0 ;
	
		.map {
			height: 916rpx;
			width: 100%;
	
			.customCallout {
				padding: 8rpx 24rpx;
				width: 190rpx;
				height: 56rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				display: inline-flex;
				justify-content: center;
				align-items: center;
			}
	
			.content {
				flex: 0 1 auto;
				font-size: 24rpx;
				color: #00091A;
			}
	
			span {
				font-size: 24rpx;
				color: #4281FF;
			}
		}
	
		.b_img {
			width: 750rpx;
			height: 916rpx;
			background: linear-gradient(to bottom, #FFFFFF 86%, rgba(255, 255, 255, 0) 100%);
			position: absolute;
			top: 0;
			left: 0;
		}
	
		.s_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			top: 112rpx;
			left: 32rpx;
		}
	}

	.bottom {
		position: relative;
		left: 0;
		padding: 0 32rpx;

		.bottom_a {
			position: absolute;
			top: -162rpx;

			.a_img {
				width: 48rpx;
				height: 48rpx;
				border-radius: 100rpx;
				margin-right: 8rpx;
			}

			.b_left {
				margin-top: 14rpx;

				.b_list {
					position: relative;
					width: 12rpx;
					height: 130rpx;

					.b_dian {
						width: 12rpx;
						height: 12rpx;
						border-radius: 100rpx;
						z-index: 9;
						position: absolute;
						top: 0;
						left: 0;
					}

					.b_xian {
						width: 2rpx;
						height: 130rpx;
						position: absolute;
						top: 6rpx;
						left: 6rpx;
						z-index: 7;
					}
				}

			}

			.r_img {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.bott_b {
			position: absolute;
			top: 234rpx;
		}

		.bottom_b {
			.b_img {
				width: 200rpx;
				height: 200rpx;
			}

			.bo_b_r {
				width: 414rpx;
				height: 200rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
			}
		}

		.bottom_c {
			padding: 32rpx 24rpx;
		}
	}
</style>